<template>
  <div class="wrap">
    <div class="header">
      <i class="wyy wyy-yuanquan"></i>
      <span>新碟上架</span>
      <span class="more">
        更多<i class="wyy wyy-jiantou"></i>
      </span>
    </div>
    <div class="new">
      <div class="jiantou jiantouzuo"><i class="wyy wyy-jiantouyou1" @click="left"></i></div>
      <div class="new-cd">
        <ul id="oUl">
          <li v-for="item in albumList" :key="item.id">
            <img :src="item.blurPicUrl" alt="">
            <p class="song">{{ item.name }}</p>
            <p class="singer">{{ item.artist.name }}</p>
          </li>
        </ul>
      </div>
      <div class="jiantou jiantouyou"><i class="wyy wyy-jiantouyou" @click="right"></i></div>
    </div>
  </div>
</template>

<script>
import { getAlbum } from '@/api/recommend.js'
export default {
  name: 'NewAlbum',
  data () {
    return {
      albumList: []
    }
  },
  created () {
    this.getAlbum()
  },
  methods: {
    async getAlbum () {
      const res = await getAlbum({
        limit: 8
      })
      this.albumList = res.data.weekData.slice(0, 10)
    },
    left () {
      document.querySelector('#oUl').classList.add('left')
      document.querySelector('#oUl').classList.remove('right')
    },
    right () {
      document.querySelector('#oUl').classList.add('right')
      document.querySelector('#oUl').classList.remove('left')
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 0 20px;
  margin: 22px 0 30px 0;
  .header {
    border-bottom: 4px solid #C10D0C;
    .wyy-yuanquan {
      color: #C10D0C;
    }
    span {
      margin-left: 10px;
      font-size: 20px;
      color: #333;
    }
    ul {
      margin-left: 20px;
      font-size: 12px;
      color: #666;
      display: inline-block;
      width: 2000px;
      li {
        display: inline-block;
        border: 0;
      }
      span {
        font-size: 12px;
        color: #666;
        margin: 0 8px;
      }
    }
    .more {
      margin-top: 10px;
      float: right;
      font-size: 12px;
      color: #666;
      i {
        color: #C10D0C;
        font-weight: 600;
        vertical-align: middle;
      }
    }
  }
  .new {
    margin-top: 20px;
    height: 184px;
    padding-left: 16px;
    background: #f5f5f5;
    border: 1px solid #d3d3d3;
    .jiantou {
      display: inline-block;
      height: 184px;
      line-height: 184px;
      font-size: 12px;
      color: #666;
    }
    .jiantouzuo {
      float: left;
    }
    .jiantouyou {
      float: left;
      margin-right: 15px;
    }
    .new-cd {
      float: left;
      height: 184px;
      width: 630px;
      overflow: hidden;
      ul {
        width: 1265px;
        height: 184px;
        // overflow: hidden;
      li {
        float: left;
        margin-left: 8px;
        height: 184px;
        width: 118px;
        flex: 118px;
        text-align: center;
        padding-top: 28px;
        img {
          width: 100px;
          height: 100px;
          box-shadow: 3px 5px 5px #656B79;
        }
        .song {
          font-size: 14px;
          height: 22px;
          line-height: 22px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .singer {
          color: #333;
          font-size: 12px;
          height: 18px;
          line-height: 18px;
        }
      }
    }
    // 下面写动画啦！
      .left {
        transition: 3s linear;
        transform: translateX(-630px);
      }
      .right {
        transition: 3s linear;
        transform: translateX(0px);
      }
    }
  }
}
</style>
